<template>
  <!-- 头部 -->
  <el-row>
    <el-col :xs="2" :sm="0" :md="0" :lg="0" class="expend_icon">
      <div class="expend_icon">
        <el-icon style="font-size: 20px" class="openicon">
          <component :is="collapseBtnClass" @click="collapse"></component>
        </el-icon></div
    ></el-col>
    <el-col :span="4" :xs="10">
      <div class="logo"><span>校园疫情管理系统</span></div>
    </el-col>
    <el-col :span="16" class="hidden-xs-only">
      <div class="navall">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          :default-active="$route.path"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/front/userhourse">首页</el-menu-item>
          <el-sub-menu index="2">
            <template #title>个人中心</template>
            <el-menu-item index="/front/userperson">个人信息</el-menu-item>
            <el-menu-item index="/front/hesuanresult">核酸检测</el-menu-item>
            <el-menu-item index="/front/vaccinesituation"
              >疫苗接种</el-menu-item
            >
          </el-sub-menu>
          <el-menu-item index="/front/myheathclock">健康打卡</el-menu-item>
          <el-menu-item index="4">Orders</el-menu-item>
        </el-menu>
        <div class="h-6" />
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
        </el-menu>
      </div>
    </el-col>
    <el-col :span="4" :xs="12">
      <div class="toolbar" v-if="!users.username">
        <el-button @click="$router.push('/login')">登录</el-button>
        <el-button @click="$router.push('/register')">注册</el-button>
      </div>

      <div v-else class="toolbar">
        <!-- 切换夜间模式 -->
        <swich-model class="mr-10"></swich-model>
        <el-avatar
          icon="UserFilled"
          :size="26"
          :src="users.avatarUrl"
          class="mr-10"
        />
        <el-dropdown>
          <span style="font-size: 16px"
            >{{ users.nickname
            }}<el-icon style="margin-left: 5px"><ArrowDownBold /></el-icon
          ></span>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <router-link to="/front/userperson">个人信息</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click="logout"> 退出 </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-col>
  </el-row>
</template>


<script>
import SwichModel from '../Switch/SwichModel.vue'
export default {
  name: 'common-header',
  data() {
    return {
      // 本地存储中获取数据
      //三元表达式 若获取得到本地user数据，则返回当前数据，否则返回空｛｝
      //JSON.parse 字符串->对象
      // users: localStorage.getItem('user')
      //   ? JSON.parse(localStorage.getItem('user'))
      //   : {}
    }
  },

  created() {
    console.log(this.users)
  },
  props: {
    collapseBtnClass: {
      type: String,
      default: 'Expand'
    },

    //伸缩图案
    collapse: Function, //函数类型
    //user
    users: Object
  },

  methods: {
    handleMenuSelect(index) {
      this.$router.push(index)
    },
    logout() {
      this.$store.commit('logout')
      // this.$router.push('/login')
      // localStorage.removeItem('user')
      this.$message.success('退出成功')
      // window.addEventListener('beforeunload', function (event) {
      //   localStorage.clear()
      // })
    }
  },

  computed: {
    currentPathName() {
      return this.$store.state.currentPathName //需要监听的数据
    }
  },
  watch: {
    //监听路由变化
    currentPathName(newVal, oldVal) {
      console.log(newVal, oldVal)
    }
  },

  components: { SwichModel }
}
</script>

<style lang="less" scoped>
.el-col {
  height: 60px;
}
.logo {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-weight: 800;
  font-size: 16px;
  color: #337ecc;
}
.navall {
  display: flex;
  height: 100%;
  .nav {
    height: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    li {
      height: 100%;
      width: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    li:hover {
      background-color: #409eff;
      a {
        color: #fff;
      }
    }
  }
}
.toolbar {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.expend_icon {
  display: flex;
  align-items: center;
  // justify-content: center;
  cursor: pointer;
}

@media screen and (min-width: 769px) {
  .openicon {
    display: none;
  }
}
</style>

